<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="商铺编号">
        <HouseInput v-model="queryParams.code"></HouseInput>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-divider></el-divider>

    <el-descriptions class="margin-top" title="商铺信息" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          编号
        </template>
        {{ form.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          商铺状态
        </template>
        <span v-if="form.shopState == '0'">空置</span>
        <span v-else-if="form.shopState == '1'">出租</span>
        <span v-else-if="form.shopState == '2'">出售</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          到期日期
        </template>
        {{ form.endTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          占地面积
        </template>
        <span v-if="form.floorArea != null"> {{ form.floorArea + "㎡" }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          使用面积
        </template>
        <span v-if="form.useArea != null">{{ form.useArea + "㎡" }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          行业
        </template>
        {{ form.trade }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          客户姓名
        </template>
        {{ form.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系方式
        </template>
        {{ form.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          入住时间
        </template>
        {{ form.createTime }}
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="临时收费" name="first">
        <TdViews
          v-model="value"
          v-if="formOpen"
          :searchState="searchState"
        ></TdViews>
      </el-tab-pane>
      <el-tab-pane label="收取押金" name="second">
        <DmViews
          v-model="value"
          v-if="formOpen"
          :searchState="searchState"
        ></DmViews>
      </el-tab-pane>
      <el-tab-pane label="预存款" name="third">
        <AdViews
          v-model="value"
          v-if="formOpen"
          :searchState="searchState"
        ></AdViews>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  listTemporarydeposit,
  getTemporarydeposit,
  addTemporarydeposit,
  updateTemporarydeposit,
} from "@/api/system/temporarydeposit";
import {
  listPaymentmethod,
  getPaymentmethod,
} from "@/api/system/paymentmethod";
import { listChargeitem, getChargeitem } from "@/api/charge/chargeitem";
import {
  listRentalcontract,
  getRentalcontract,
} from "@/api/rentalcontract/rentalcontract";
import { listHirer } from "@/api/renter/hirer";
import { number } from "echarts";
import { listShops, getShops } from "@/api/shops/shops";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "totolCash",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      // 搜索框的隐藏与展示
      searchState: false,
      // 表单的开启
      formOpen: false,
      value: null,
      form: {},
      activeName: "first",
      queryParams: {
        code: null,
        pageNum: 1,
        pageSize: 10,
        id: null,
        shopsId: null,
        name: null,
        state: null,
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      if (!this.formOpen) {
        this.$message.warning("请先选择商铺");
      }
      // console.log(tab, event);
    },
    handleQuery() {
      listShops({ code: this.queryParams.code })
        .then((res) => {
          if (res.code == 200) {
            this.updateFormWithShopData(res.rows[0]);
          } else {
            this.handleError(res.msg);
          }
        })
        .catch((error) => {
          console.error("Error fetching shops:", error);
          this.handleError("An error occurred while fetching shops.");
        });
    },

    updateFormWithShopData(shopData) {
      this.form.shopsId = shopData.id;
      this.form.shopState = shopData.state;
      this.value = shopData.id;
      Object.assign(this.form, shopData); // 或者使用 {...this.form, ...shopData} 但要注意不要覆盖重要数据
      this.fetchRentalContract(shopData.id);
    },

    fetchRentalContract(shopsId) {
      listRentalcontract({ shopsId })
        .then((res) => {
          if (res.code == 200) {
            this.updateFormWithRentalContractData(res.rows[0]);
          } else {
            this.handleError(res.msg);
          }
        })
        .catch((error) => {
          console.error("Error fetching rental contract:", error);
          this.handleError("An error occurred while fetching rental contract.");
        });
    },

    updateFormWithRentalContractData(rentalContractData) {
      this.form.trade = rentalContractData.trade;
      this.form.endTime = rentalContractData.endTime;
      this.fetchHirer(rentalContractData.hirerId);
      // 注意：这里可能不需要直接更新 this.form，除非你确定要这样做
      // 你可以根据具体需求来决定是否更新 this.form 或只是存储需要的数据
    },

    fetchHirer(id) {
      listHirer({ id })
        .then((res) => {
          if (res.code == 200) {
            this.updateFormWithHirerData(res.rows[0]);
          } else {
            this.handleError(res.msg);
          }
        })
        .catch((error) => {
          console.error("Error fetching hirer:", error);
          this.handleError("An error occurred while fetching hirer.");
        });
    },

    updateFormWithHirerData(hirerData) {
      this.form = { ...this.form, ...hirerData };
      this.formOpen = true;
      this.searchState = false;
      // 更新其他需要的字段...
      console.log(this.form);
    },

    handleError(msg) {
      this.$message.error(msg);
    },
  },
};
</script>
<style lang='' scoped>
</style>